.notifier-container {
    text-align: right;
    position: fixed;
    margin: 5px;
    padding: 5px;
    top: 0;
    right: 5px;
    pointer-events: none;
}

.notification {
    position: relative;
    right: 0px;
    opacity: 0;
    margin: 5px;
    transition-duration: 1s;
    padding: 5px;
    pointer-events: none;
    background-color: rgb(0, 196, 0);
    border-radius: 5px;
    border: 2px solid rgb(255, 255, 255);
    
}

.notification-appears {
    animation: notificationAppearsAnimation 0.5s linear;
    opacity: 1;
}

.notification-disappears {
    animation: notificationDisappearsAnimation 0.33s cubic-bezier(0.8, -0.01, 1, 1);
    opacity: 0;
}

@keyframes notificationAppearsAnimation{
    0% {
        right: -150%;
        left: initial
    }
    20% {
        clip: rect();
    }
    60% {
        right: 17.5px;
        left: initial
    }
    77.5% {
        right: -5px
    }
    100% {
        right: 0px;
        left: initial
    }
}

@keyframes notificationDisappearsAnimation {
    0% {
        right: 0px
    }
    100% {
        right: -75%
    }
}